﻿<div class="row">
    <div class="col-sm-2">
        <div name="ownerForm" class="form-horizontal well" role="form">
            <fieldset>
                <legend>Owner</legend>
                <div ng-controller="AccountController"
                    ng-init="init(dataItem.Owner,dataItem.OwnerOperator,'owner', dataItem.Id)">
                    @Html.Partial("OCForm")
                </div>
            </fieldset>
        </div>
    </div>
    <div class="col-sm-2">
        <div name="chartenerForm" class="form-horizontal well" role="form">
            <fieldset>
                <legend>Charterer</legend>
                <div ng-controller="AccountController"
                    ng-init="init(dataItem.Charterer,dataItem.ChartererOperator,'chart', dataItem.Id)">
                    @Html.Partial("OCForm")
                </div>
            </fieldset>
        </div>
    </div>
    <div class="col-sm-2" ng-controller="AccountController" ng-init="init('','','Vessel', dataItem.Id)">
        <div name="vesselForm" class="form-horizontal well" role="form" ng-controller="dateValidator">
            <fieldset>
                <legend>Fixture/Vessel</legend>

                <div class="form-group">
                    <div class="col-xs-12">
                        <label>Fixture name</label>
                        <input type="text" ng-model="acc.fixtureName" tabindex="-1" ng-keydown="changeSelection($event)" ng-init="acc.fixtureName=dataItem.Vessel.Name+' C/P '+getDateString(dataItem.CPDate)"
                            class="form-control" />
                        @* CAREFUL DO NOT CHANGED *@
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-xs-12" ng-controller="AutocompleteController" ng-init="init('Vessel', '', dataItem.Id, dataItem.Vessel.Name)">
                        <label>Vessel</label>
                        <span class="k-widget k-autocomplete k-header k-input k-state-default">
                            <input kendo-auto-complete id="{{'vessel'+info.id}}" class="k-input" ng-keydown="changeSelection($event)" onClick="this.select();" tabindex="-1" k-options="autocompleteVessel" 
                                ng-model="info.Vessel" ng-change="getVesselData(); acc.fixtureName=info.Vessel+' C/P '+getDateString(dataItem.CPDate)" />
                            <span class="k-icon k-loading" ng-style="currStyle"></span>
                        </span>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
    <div class="col-sm-6">
        <section class="well">
            <legend>Co-Brokers</legend>
            <div kendo-grid k-options="coBrokersGrid(dataItem.CoBrokers)" id="cbgrid"></div>
            <script>
                setTimeout(function () {
                    $('#cbgrid > div.k-grid-header > div > table > thead > tr > th > a.k-link').each(function () {
                        $(this).attr('tabindex', -1);
                    });
                    $(".k-textbox").attr('tabindex', -1);
                    $(".k-dropdown").attr('tabindex', -1);
                }, 2000);
        </script>
        </section>
    </div>
</div>
